<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="./js/lib-flexible-2.0/index.min.js"></script>
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        body {
            overflow: hidden;
            display: flex;
            background: #111;
            perspective: 1000px;
            transform-style: preserve-3d;
        }

        #drag-container,
        #spin-container {
            position: relative;
            display: flex;
            margin: auto;
            transform-style: preserve-3d;
            transform: rotateX(-10deg);
        }

        #drag-container img,
        #drag-container video {
            transform-style: preserve-3d;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            line-height: 200px;
            font-size: 50px;
            text-align: center;
            box-shadow: 0 0 8px #fff;
            -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
        }

        #drag-container img:hover,
        #drag-container video:hover {
            box-shadow: 0 0 15px #fffd;
            -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
        }

        #drag-container p {
            font-family: Serif;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -50%) rotateX(90deg);
            color: #fff;
        }

        #ground {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -50%) rotateX(90deg);
            background: -webkit-radial-gradient(center center, farthest-side, #9993, transparent);
        }

        #music-container {
            position: absolute;
            top: 0;
            left: 0;
        }

        #carousel-container {
            width: 100%;
            height: 100%;
        }

        @keyframes spin {
            from {
                transform: rotateY(0deg);
            }

            to {
                transform: rotateY(360deg);
            }
        }

        @keyframes spinRevert {
            from {
                transform: rotateY(360deg);
            }

            to {
                transform: rotateY(0deg);
            }
        }

        .title-img {
            position: absolute;
            width: 100%;
            height: 255px;
            margin: auto;
            /* left: 25%;
            top: 4%; */
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;

        }

        .title-img img {
            width: 190px;
            height: 185px;

        }

        .buttom-text {}

        .typer-target {
            width: 100%;
            position: absolute;
            bottom: 10%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999;
        }

        .typer-target .t-text {
            width: 140px;
            color: #FFF;
            font-size: 16px;
        }
    </style>
</head>

<body onclick="autoplay(true)">
    <div class="title-img">
        <img class="" src="./image/img7.jpg" alt="">
    </div>
    <div id="drag-container" style="z-index: 999;">
        <div id="spin-container">
            <!--<img src="./image/img1.jpg" alt="">
            <img src="./image/img2.jpg" alt="">
            <img src="./image/img3.jpg" alt="">

            <img src="./image/img4.jpg" alt="">

            <img src="./image/img5.jpg" alt="">
            <img src="./image/img6.jpg" alt="">-->
            <!-- <img src="./image/img7.jpg" alt=""> -->
            <!-- <div class="" style="color:#fff"></div> -->
            <p style="width:100%;color: pink;">我们牵手吧</p>
        </div>
        <div id="ground"></div>
    </div>
    <div id="music-container"></div>
    <!-- 烟花 -->
    <div id="yanhua" class="htmleaf-container">
    </div>
    


    <div class="typer-target">
        <div class="t-text"></div>
    </div>

    <!-- 音乐 -->
    <audio id="audio" src="./sjyn.mp3">
    </audio>
    <script src="js/jq.js"></script>
    <script type="text/javascript" src="js/jquery.fireworks.js"></script>
    <script src="./js/aotu-type.js"></script>

    <script type="text/javascript">
        $('.htmleaf-container').fireworks({
            sound: false, // sound effect
            opacity: 1,
            width: '50%',
            height: '50%'
        });

        // 打字机效果
        // custom options
        var options = {
            selector: ".t-text", // target element selector
            words: ["春有百花秋有月，夏有凉风冬有雪，而我只想早晚有你～"], // words/sentences that will be auto typed
            charSpeed: 500, // letter typing animation speed
            delay: 2100, // word/sentence typing animation delay
            loop: false, // if loop is activated, autoTyper will start over
            flipflop: false // if flipflop is activated, letters which are typed animated will be removed ony by one animated
        };

        var typer = new autoTyper(options);
        typer.start();
    </script>
    <script>
        let music = document.getElementById("audio");
        function autoplay(action) {
            if (action) {
                music.paused ? music.play() : music.pause();
            }
        }
        setInterval("autoplay()", 3000);
        if (window.location.search) {
            var arr = window.location.search.split('?name=');
            if (arr.length >= 2) {
                var txt = decodeURIComponent(arr[1]);
                document.getElementsByClassName("txt-div")[0].innerHTML = txt;
            }
        }
        function toTree() {
            music.pause()
            // location.href = './index1.html'
        }

    </script>
    <script>
        // 图片初始化宽度
        var radius = 130;
        var autoRotate = true;
        var rotateSpeed = -60;
        var imgWidth = 120;
        var imgHeight = 170;
        var bgMusicURL = '';
        var bgMusicControls = true;

        // ===================== start =======================
        setTimeout(init, 100);

        var obox = document.getElementById('drag-container');
        var ospin = document.getElementById('spin-container');
        var aImg = ospin.getElementsByTagName('img');
        var aVid = ospin.getElementsByTagName('video');
        var aEle = [...aImg, ...aVid];

        ospin.style.width = imgWidth + "px";
        ospin.style.height = imgHeight + "px";

        var ground = document.getElementById('ground');
        ground.style.width = radius * 3 + "px";
        ground.style.height = radius * 3 + "px";

        function init(delayTime) {
            for (var i = 0; i < aEle.length; i++) {
                aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)";
                aEle[i].style.transition = "transform 1s";
                aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s";
            }
        }

        function applyTranform(obj) {
            if (tY > 180) tY = 180;
            if (tY < 0) tY = 0;

            obj.style.transform = "rotateX(" + (-tY) + "deg) rotateY(" + (tX) + "deg)";
        }

        function playSpin(yes) {
            ospin.style.animationPlayState = (yes ? 'running' : 'paused');
        }

        var sX, sY, nX, nY, desX = 0,
            desY = 0,
            tX = 0,
            tY = 10;

        if (autoRotate) {
            var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert');
            ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`;
        }

        if (bgMusicURL) {
            document.getElementById('music-container').innerHTML += `
<audio src="${bgMusicURL}" ${bgMusicControls ? 'controls' : ''} autoplay loop>    
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
`;
        }

        // if (mobilecheck()) {
        // ==================== Touch Events ====================
        document.ontouchstart = function (e) {
            clearInterval(obox.timer);
            e = e || window.event;
            var sX = e.touches[0].clientX,
                sY = e.touches[0].clientY;

            this.ontouchmove = function (e) {
                e = e || window.event;
                var nX = e.touches[0].clientX,
                    nY = e.touches[0].clientY;
                desX = nX - sX;
                desY = nY - sY;
                tX += desX * 0.1;
                tY += desY * 0.1;
                applyTranform(obox);
                sX = nX;
                sY = nY;
            }

            this.ontouchend = function (e) {
                this.ontouchmove = this.ontouchend = null;
                obox.timer = setInterval(function () {
                    desX *= 0.95;
                    desY *= 0.95;
                    tX += desX * 0.1;
                    tY += desY * 0.1;
                    applyTranform(obox);
                    playSpin(false);
                    if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
                        clearInterval(obox.timer);
                        playSpin(true);
                    }
                }, 17);
            }

            // return false;
        }
        // } else {
        // ==================== Mouse Events ====================
        document.onmousedown = function (e) {
            clearInterval(obox.timer);
            e = e || window.event;
            var sX = e.clientX,
                sY = e.clientY;

            this.onmousemove = function (e) {
                e = e || window.event;
                var nX = e.clientX,
                    nY = e.clientY;
                desX = nX - sX;
                desY = nY - sY;
                tX += desX * 0.1;
                tY += desY * 0.1;
                applyTranform(obox);
                sX = nX;
                sY = nY;
            }

            this.onmouseup = function (e) {
                this.onmousemove = this.onmouseup = null;
                obox.timer = setInterval(function () {
                    desX *= 0.95;
                    desY *= 0.95;
                    tX += desX * 0.1;
                    tY += desY * 0.1;
                    applyTranform(obox);
                    playSpin(false);
                    if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
                        clearInterval(obox.timer);
                        playSpin(true);
                    }
                }, 13);
            }

            return false;
        }
        document.onmousewheel = function (e) {
            e = e || window.event;
            var d = e.wheelDelta / 20 || -e.detail;
            radius += d;
            init(1);
        };
        // }
    </script>
</body>

</html>